Quick Index
Overview


This chapter is centered on examples, with some concepts mixed in.

Examples



Passing Functions as Arguments (Callback Functions)


We'll see how functions can be passed as method arguments in the same was as any other argument.

These are also referred to ascallback functions -- because the receiving method will "call back" to the function.

Passing a Simple Arg (Review)


First a quick review of a message send where we pass a simple value (a number).

Example
This is a familiar example where we pass a simple number value (2) as a message argument.
Sender
let holder, amount;
holder = new NumberHolder(10);
amount = 2;
holder.increaseBy(amount);
Receiver


Passing a Function Arg


Now we'll look at passing a function, and see how it compares to passing a simple value.

Example
This example is just like the previous, except that we are passing a function as a message argument rather than the simple value.

In this example "fct" is also called a callback function (a function passed as an argument).
Sender
let holder, fct;
holder = new NumberHolder(10);
fct = n => n + 2;
holder.changeUsing(fct);
Receiver


Many Options


JavaScript usually provides many options. Use the option what you feel is simplest.

Examples
Here are four options for different ways to pass a function as a message argument.
	passArrowFunction1() {
		let holder, fct;
		holder = new NumberHolder(10);
		fct = n => n + 2;
		holder.changeUsing(fct);
		console.log(holder);
	}
	
	passArrowFunction2() {
		let holder;
		holder = new NumberHolder(10);
		holder.changeUsing(n => n + 2);
		console.log(holder);
	}

	passTradDeclaredFunction() {
		//declared function
		let holder, fct;
		holder = new NumberHolder(10);
		function increaseByTwo(n) {
			return n + 2;
		};
		holder.changeUsing(increaseByTwo);
		console.log(holder);
	}

	passTradFunctionExpression() {
		//function expression
		let holder, increaseByTwoFct;
		holder = new NumberHolder(10);
		increaseByTwoFct = function(n) {
			return n + 2;
		};
		holder.changeUsing(increaseByTwoFct);
		console.log(holder);
	}




Function Scope


As beginners we can either skip this section, or glance at it for fun.

The biggest difference between traditional functions and arrow functions is their scope:


This is a good reason to favor arrow functions when when passing functions (using callbacks).

Frameworks Impact on Function Scope


Frameworks can break function scope.

Simple Scope Example
Here we have a very simple JavaScript class.

When we run it, we get this output:

Middleware
wow!!
class Middleware {
	static wow() {
		console.log("wow!!");
    }
	static home(req, res) {
		console.log(this.name);
		this.wow();
    }
}
Middleware.home();
Express Framework Breaks Scope
When we use the Express framework (for Node.js) and route the home path "/" to the home method our code breaks.

The reason is that Express does not preserve the simple scope within the class and "this" is undefined.

Some of the Mongoose does similar. We should expect other frameworks may do similar.
app.get('/', Middleware.home);
Solution #1
This is probably the easiest solution.

We simply add an arrow function that then calls the class static method in the normal way.

The usage of "this" is then as expected.
//app.get('/', Middleware.home);
app.get('/', (req, res) => Middleware.home(req, res));
Solution #2
We could also change the original code. This is generally not desireable being that we coded our objects a certain way for a reason.
	static home(req, res) {
		console.log(this.name);
		Middleware.wow();
}
Solution #3
This solution is just a reminder to keep out "heads up" regarding function types.

In some cases we may run into (in Mongoose, for example) the suggestion is to use traditional functions over arrow functions.
Traditional Methods


Navigation